<script lang="ts" setup>
	import BridIcon from './BridIcon.vue';
	import BaseButton from './Button.vue';
	import { imgUrl } from "../../common/domain/index";

	// const emits = defineEmits(['change']);

	withDefaults(
		defineProps<{
			imgPath : string,
			maintitle : string,
			minTitle : string,
			trendTitle : string,
			trimFlag ?: boolean,
			id : number,
			price : string,
		}>(),
		{
			trimFlag: false,
		}
	)

	function getImg(imgurl : string) {
		return imgUrl + imgurl;
	}
	function goBuy(id : number) {
		// _baq.track("page_view", { assets_id: "1767299090691086", product_name: '手机', product_price: id })
		let clickid=window.localStorage.getItem('clickId')
		const href = 'alipays://platformapi/startapp?appId=2021004105661520&page=' + encodeURIComponent(`pages/index/index?from=2023032916475592&saleuserid=2023032916475592&clickid=${clickid}`);
		// const href = 'alipays://platformapi/startapp?appId=2021004105661520&page=' + encodeURIComponent(`packageA/pages/productDetails/productDetails?__appxPageId=400&goodsId=${id}&from=2023032916475592${clickid}&saleuserid=2023032916475592&clickid=${clickid}`);
		window.location.href = href;

	}
	(function (r, d, s) {
		r._tt_config = true;
		var _baq = (r._baq = r._baq || []); _baq.methods = ["track", "off", "on"];
		_baq.factory = function (method) {
			return function () {
				var args = Array.prototype.slice.call(arguments);
				args.unshift(method); _baq.push(args); return _baq
			}
		}; for (var i = 0; i < _baq.methods.length; i++) {
			var key = _baq.methods[i]; _baq[key] = _baq.factory(key)
		} _baq.load = function () {
			var js, fjs = d.getElementsByTagName(s)[0]; js = d.createElement(s);
			js.src = "https://analytics.oceanengine.com/api/v2/js/sdk"; fjs.parentNode.insertBefore(js, fjs)
		};
		_baq.load(); if (_baq.invoked) { return } _baq.invoked = true; _baq.track("pageview")
	})(window, document, "script")
</script>
<template>
	<div class="phone-card" @click="goBuy(id)">
		<div class="first">
			<span class="bold">{{ minTitle }}</span>
		</div>
		<img class="goods-img" :src="getImg(imgPath)">
		<div class="detail">
			<p class="goods-title f12">{{ maintitle }}</p>
			<div class="price f12">
				<brid-icon></brid-icon>
				<span class="start scale08" v-if="trimFlag">￥xx</span>
				<span class="holiday">{{ trendTitle }}</span>
				<span class="end scale08" v-if="trimFlag">￥xx</span>
			</div>
			<base-button :title="`￥${price}天`" :id="id"></base-button>
		</div>
	</div>
</template>
<style lang="scss" scoped>
	.scale08 {
		transform: scale(.8);
	}

	.phone-card {
		position: relative;
		padding-bottom: 10px;

		.first {
			position: absolute;
			top: 0;
			left: 0;
			width: 70px;
			height: 28px;
			border-bottom-right-radius: 16px;
			background: linear-gradient(180deg, #FF814A 27%, #FF540A 69%, #FF0600 100%);
			box-shadow: 0px 4px 4px 0px rgba(255, 129, 74, 0.35);
			display: flex;
			align-items: center;
			justify-content: center;

			span {
				display: inline-block;
				font-size: 18px;
				color: white;
				white-space: nowrap;
				transform: scale(.7);
			}
		}

		.goods-img {
			width: 220px;
			object-fit: contain;
			height: 170px;
			padding: 20px;
		}

		.detail {
			padding: 0 10px;
			overflow: hidden;
			position: relative;
			margin-top: -10px;

			.goods-title {
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				text-align: center;

			}

			.price {
				position: relative;
				color: #999999;

				span {
					position: absolute;
				}

				.start {
					top: -15px;
					left: 0;
				}

				.holiday {
					color: #FFA57D;
					top: -35px;
					left: 50%;
					transform: translateX(-50%) scale(.7);
					white-space: normal;
					font-size: 12px;
				}

				.end {
					right: 0;
					top: -15px;
				}
			}
		}
	}
</style>